<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>

    <!-- 样式表 -->
    <link rel="stylesheet" href="../less/commCss/normalize.css">
    <link rel="stylesheet" href="../less/commCss/reset.css">
    <link rel="stylesheet" href="../less/commCss/property.css">
    <link rel="stylesheet" href="../less/commCss/basic.css">
    <!-- 字体 -->
    <link rel="stylesheet" href="../fonts/iconfont.css">

    <link rel="stylesheet" href="../less/home.css">

</head>
<body>
    <div class="app-home dpflex fdcolumn">
        <header class="bor">
        
        </header>
        <main class="dpflex fdcolumn wrapper">
            <section class="dpflex mt8">
                <div class="ranking pr bgr brad">
                    <p class="pa f20 c004 fb">今日排名</p>
                    <p class="pa f80 cf fb">9</p>
                </div>
                <div class="punch pr bgr brad">
                    <p class="pa f20 c005 fb">累积打卡23天</p>
                    <p class="pa f20 brad tac f14 c004">今日打卡</p>
                </div>
            </section>
            <section class="dpflex mt8 pr">
                <div class="exercise brad bgr">
                    <p class="f16 pa cf fb">运动数据</p>
                </div>
                <div class="medal brad bgr pr">
                    <p class="pa f16 fb c005">累积运动徽章</p>
                    <p class="pa f18 fb c005"><span class="f34">3</span>枚</p>
                </div>
            </section>
            <section class="mt8 pr brad">
                <p class="pa cf fb">课程训练</p>
            </section>
            <section class="mt8 pr brad">
                <p class="pa cf fb">户外跑步</p>
            </section>
        </main>
        <footer class="mt8">
            <div class="dpflex">
                <a href="#" class="dpflex fdcolumn f14 active">
                    <i class="iconfont icon-home"></i>
                    <p>首页</p>
                </a>
                <a href="#" class="dpflex fdcolumn f14">
                    <i class="iconfont icon-sport"></i>
                    <p>运动</p>
                </a>
                <a href="#" class="dpflex fdcolumn f14">
                    <i class="iconfont icon-mine"></i>
                    <p>我的</p>
                </a>
            </div>
        </footer>
    </div>
</body>
</html>